<template>
  <div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="35%">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px" style='width: 300px; margin-left:30px;'>
        <el-form-item
          prop="gwProductName"
          label="产品名称:">
          <el-input v-model="temp.gwProductName" size="mini"></el-input>
        </el-form-item>

        <el-form-item
          prop="gwCompanyId"
          label="公司名称:"
          :rules="filter_rules({required: true})"
        >
          <el-select v-model="temp.gwCompanyId"  placeholder="请选择">
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.gwCompanyName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          prop="gwProductBrief"
          label="产品简介:">
          <el-input v-model="temp.gwProductBrief"  type="textarea"></el-input>
        </el-form-item>

        <el-form-item
          prop="gwProductSfileId"
          label="图片:"
        >
          <el-upload
            :action="uploadUrl"
            :file-list="logoPaths"
            :limit="1"
            :on-exceed="fileOver"
            :on-success="fileLogoSuccess"
            :before-remove="fileLogoRemove"
            :before-upload="beforeUpload"
            list-type="picture-card">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip"  style="color:red">只能上传jpg/png文件，且不超过500kb,只能上传一张图片</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="updateData" size="mini">确 定</el-button>
        <el-button v-else type="primary" @click="updateData" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import { yfuInfoToast, yfuSuccessToast } from '@/utils/yfuMessage.js'
  import { UploadDownload, yfuPost } from '@/utils/request.js'
  import { updateConfig, saveConfig } from '@/view/website/api/product.js'
  import { configListAll } from '../api/company.js'
  export default {
    created () {
      let cThis = this
      yfuPost(process.env.BASE_API, configListAll.url, {}, function (data) {
        cThis.companyList = data
      })
    },
    data () {
      // let cThis = this
      return {
        value2: 0,
        companyList: [],
        uploadUrl: UploadDownload.upload,
        logoPaths: [],
        resetTemp: {},
        options: [],
        temp: {
        },
        textMap: {
          update: '修改',
          create: '新建'
        },
        dialogStatus: 'update',
        dialogFormVisible: false,
        rules: {
          gwProductSfileId: [{
            required: true,
            trigger: 'blur',
            validator: function (rule, value, callback) {
              if (value === '' || value === null || value === undefined) {
                callback(new Error('请选择图片'))
              } else {
                callback()
              }
            }
          }]
        }
      }
    },
    methods: {
      createDialog () {
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.temp = JSON.parse(JSON.stringify(this.resetTemp))
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      modifyDialog (row) {
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
        this.temp = Object.assign({}, row) // copy obj

        let file = {}
        this.logoPaths = []
        file.name = row.fileName
        file.url = row.fileFtpPath
        this.logoPaths.push(file)
      },
      updateData () {
        let cThis = this

        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            cThis.submitInfo()
          } else {
            return false
          }
        })
      },
      submitInfo () {
        let cThis = this
        if (cThis.dialogStatus === 'create') {
          yfuPost(process.env.BASE_API, saveConfig.url, cThis.temp, (data) => {
            yfuSuccessToast('修改成功')
            cThis.dialogFormVisible = false
            cThis.$emit('fmModuleToRefreshTable')
          })
        } else {
          yfuPost(process.env.BASE_API, updateConfig.url, cThis.temp, (data) => {
            yfuSuccessToast('修改成功')
            cThis.dialogFormVisible = false
            cThis.$emit('fmModuleToRefreshTable')
          })
        }
      },
      // 文件超出个数限制时的钩子
      fileOver (file, fileList) {
        yfuInfoToast('超过上传最大值，请删除生在重新上传！')
      },
      // 文件上传成功时的钩子
      fileLogoSuccess (response, file, fileList) {
        if (response.statusCode === '200') {
          this.temp.gwProductSfileId = response.data.id
        } else {
          yfuInfoToast('上传文件不成功，请删除后重新传')
        }
      },
      // 删除文件之前的钩子
      fileLogoRemove (file, fileList) {
        this.temp.gwProductSfileId = undefined
      },
      // 上传文件之前的钩子
      beforeUpload (file) {
        if (file.name.indexOf('.png') > 0 || file.name.indexOf('.jpg') > 0) {
          let m = 500 * 1024
          if (file.size > m) {
            yfuInfoToast('文件不能超过500K！')
            return false
          }
        } else {
          yfuInfoToast('格式不正确！')
          return false
        }
      }
    }
  }
</script>

<style>

</style>
